<template>
  <div>
    <div class="directory">
      <product-directory :productList="productDirectoryList" @onClick="handleCategoriesClick"></product-directory>
    </div>
    <product-swiper :loading="loading" :productList="productList"></product-swiper>
  </div>
</template>

<script>
import ProductSwiper from './ProductSwiper.vue'
import ProductDirectory from './ProductDirectory.vue';

export default {
  components: { ProductSwiper, ProductDirectory },
  props: {
    productList: {
      type: Array,
      required: true
    },
    productDirectoryList: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  computed: {
    getProducts () {
      var result = [];
      this.productList.some((item) => {
        result = result.concat(item.products);
      });
      return result;
    }
  },
  methods: {
    handleCategoriesClick (item) {
      location.href = "/Product?categoriesId=" + item.id;
    }
  }
}
</script>

<style scoped>
.directory {
  margin: 50px 0px;
}
</style>